This PR removes styled-components usage from ThemeProvider.stories.tsx as part of the ongoing migration away from styled-components in Storybook stories.

Changes Made

• Removed Box component usage: Replaced all Box components with semantic div elements
• Eliminated sx prop usage: Migrated inline styles to CSS module classes
• Created CSS module classes: Added .ThemeBox and .AutoContents classes in ThemeProviderStories.module.css
• Used proper CSS variables: Implemented theming support with variables like --fgColor-default, --bgColor-default, --borderColor-default, etc.
• Updated imports: Changed from side-effect CSS import to named import for CSS modules

Before/After

Before:

<Box
  my={3}
  p={3}
  color="fg.default"
  bg="canvas.default"
  borderWidth="1px"
  borderStyle="solid"
  borderColor="border.default"
  borderRadius={2}
>
  Content
</Box>

After:

<div className={classes.ThemeBox}>
  Content
</div>

The visual appearance and functionality remain exactly the same, but the implementation no longer depends on styled-components. All existing tests pass and the Storybook builds successfully.

Fixes #6536.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.